<template>
  <div id="card">
    <img :src="coverImg" alt="">
    <div class="rt">
      <p class="title">
        {{title}}
      </p>
      <div class="second-title">
        <slot name="second">
          
        </slot>
      </div>
      <p v-if="btm"  class="l-h17 f12 f-c99">
        {{ btm }}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    title: String,
    btm: String,
    coverImg: String
  },
  setup(props){
    // console.log(props)
  }
}
</script>

<style lang="scss" scoped>
[v-cloak] {
    display: none;
}
  #card{
    width: 100%;
    display: flex;
    justify-content: space-between;
    img{ 
      width: 7.8rem;
      height: 7.8rem;
      object-fit: cover;
    }
    .rt{
      flex: 1;
      margin-left: 1.1rem;
      display: flex;
      flex-direction: column;
      .title{
        line-height: 2;
        font-size: 1.6rem;
      }
      .second-title{
        display: flex;
        justify-content: space-between;
        font-size: 1.2rem;
        color: #999;
        margin-top: 1rem;
      }
      .btm{
        margin-top: .6rem;
      }
      
      /* justify-content: space-between; */
      /* align-items: center; */
    }
  }
</style>